import React from "react";

import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import Typography from "@material-ui/core/Typography";

interface HeaderWidgetProps {
  cryptoName: string;
  cryptoChanges: string;
  cryptoPrice: number;
  isAscending: boolean;
}

const HeaderWidget = (props: HeaderWidgetProps) => {
  const { cryptoName, cryptoChanges, cryptoPrice, isAscending } = props;
  return (
    <>
      <div className="header-widgets-box">
        <Typography color={"textPrimary"} className="crypto-name">
          {cryptoName} :
        </Typography>
        <div
          className={`{crypto-price-changes ${
            isAscending ? "text-success" : "text-danger"
          }`}
        >
          {cryptoChanges}%
          {isAscending ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
        </div>
        <Typography color="textPrimary" className="crypto-value">
          {cryptoPrice} $
        </Typography>
      </div>
    </>
  );
};

export default HeaderWidget;
